<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { basicProps } from './props';
  const props = defineProps({
    ...basicProps,
    chartData: {
      type: Array,
      required: true,
      default: () => [],
    },
    xAxisData: {
      type: Array,
      default: () => ['2024.05', '2024.06', '2024.07', '2024.08', '2024.09', '2024.10'],
    },
    legendTitles: {
      type: Array,
      default: () => ['入住人数'],
    },
    islegendShow: {
      type: Boolean,
      default: true,
    },
    colorArr: {
      type: Array,
      default: () => ['#1890FF', '#A0D911'],
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const init = () => {
    const series = props.chartData.map((item, index) => {
      return {
        name: props.legendTitles[index],
        type: 'line',
        itemStyle: {
          color: props.colorArr[index],
        },
        label: {
          show: false,
          //   color: '#fff',
          position: 'top',
          formatter(p) {
            return p.value > 0 ? p.value : '';
          },
        },
        data: item,
      };
    });
    setOptions(
      {
        tooltip: {
          trigger: 'axis',
          // backgroundColor: 'rgba(225,225,225,0.7)',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'dashed',
            },
          },
          padding: [10, 10],
          textStyle: {
            fontSize: 12,
            // lineHeight: 14,
          },
          // formatter: function (params) {
          //   var result = params[0].name + '<br>'
          //   params.forEach(function (item) {
          //     if (item.value) {
          //       if (item.seriesName == '准确率') {
          //         result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '%</br>'
          //       } else {
          //         result += item.marker + ' ' + item.seriesName + ' : ' + item.value + '</br>'
          //       }
          //     } else {
          //       result += item.marker + ' ' + item.seriesName + ' :  - </br>'
          //     }
          //   })
          //   return result
          // }
        },
        grid: { left: '1%', right: '1%', top: '3%', bottom: 0, containLabel: true },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
            },
            //boundaryGap: [0, 0.01],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E7E7E7',
              },
            },
            axisLabel: {
              color: 'rgba(0,0,0,0.6);',
              fontSize: 12,
              interval: 0,
              rotate: 30,
            },
            data: props.xAxisData as [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#E7E7E7',
              },
            },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.4)',
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#E7E7E7'],
                width: 1,
                type: 'solid',
              },
            },
            boundaryGap: [0, 0.01],
          },
        ],
        series: series as [],
      },
      true
    );
  };
  watchEffect(() => {
    init();
  });
</script>
